import CustomerAdd from './CustomerAdd';
import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Form, RouteLayout, MapPage } from 'weaver-mobile-page';
import { List, Tools, Switch, Modal, ActivityIndicator } from 'weaver-mobile';
import CustomerCard from '../card/Customer/index';
import ContacterForm from '../form/ContacterForm';
const Item = List.Item;
const alert = Modal.alert;
const ButtonGroup = RouteLayout.ButtonGroup;
const getLabel = Tools.getLabel;

const Edit = MapPage.Edit;
const Normal = MapPage.Normal;
@inject('customerAddExistStore')
@withRouter
@observer
export default class CustomerAddExist extends React.Component {

    componentDidMount() {
        const store = this.props.customerAddExistStore;
        store.initForm(this.props);
    }

    render() {
        const { history, customerAddExistStore } = this.props;
        const { form, buttonProps, existList, tooManyRecord, showAddForm, saveContacter, showGoOn, complete, addFormComplete, getMapLayout, getMap, showMapFun, crmCard, customerId, contacterForm, crm_name_duplication } = customerAddExistStore;

        let buttonGroupData = [];
        !showGoOn && buttonGroupData.push({
            key: 'clear',
            text: getLabel('201', '取消'),
            onClick: () => alert('', getLabel('390915', '确定要离开吗?'), [
                { text: getLabel('201', '取消'), onPress: () => { } },
                { text: getLabel('83446', '确定'), onPress: () => history.go(-1) },
            ])
        });
        showGoOn && buttonGroupData.push({
            key: 'goon',
            text: getLabel('1256', '继续'),
            onClick: () => this.buttonClick('add'),
        });

        buttonGroupData.push({
            key: 'submit',
            text: buttonProps.content,
            onClick: () => this.buttonClick(buttonProps.clickType),
            type: 'primary',
            disabled: buttonProps.disabled,
            loading: buttonProps.loading
        });
        return (
            complete ?
                <div className={"crm-form-main"}>
                    <div className="crm-form-content">
                        {showAddForm ? <div>
                            {addFormComplete ? <div>
                                <List>
                                    <Item>
                                        <div style={{ float: 'left', marginTop: '5px' }}>{getLabel('390917', "提交之后创建联系人")}</div>
                                        <div style={{ float: 'right' }}>
                                            <Switch checked={saveContacter} onChange={() => customerAddExistStore.isSaveContacter(!saveContacter)} />
                                        </div>
                                    </Item>
                                </List>
                                <CustomerAdd contentStore={customerAddExistStore} />
                                <Route
                                    key={crmCard.id}
                                    path={crmCard.path}
                                    render={() => {
                                        return (
                                            <RouteLayout getContainer={() => document.getElementById("root")}>
                                            <div
                                                key="crmCard"
                                                className="wm-route-layout"
                                            >                    
                                                <CustomerCard params={{id:customerId}}/>
                                            </div>
                                            </RouteLayout>
                                        )
                                    }}
                                />
                                <Route
                                    key={contacterForm.id}
                                    path={contacterForm.path}
                                    render={() => {
                                        return (
                                            <RouteLayout getContainer={() => document.getElementById("root")}>
                                            <div
                                                key="contacterForm"
                                                className="wm-route-layout"
                                            >                    
                                                <ContacterForm params={{customerId:customerId,operation:'add',rpath:'customerCard'}}/>
                                            </div>
                                            </RouteLayout>
                                        )
                                    }}
                                />
                            </div> : null
                            }
                        </div> :
                            <div>
                                <Form store={form} />
                                <List renderHeader={() => getLabel('18739', '注意') + ':'}><Item wrap multipleLine>{getLabel(20272, '请输入客户名称，系统将搜索是否有重名客户。')}<br />{getLabel(20273, '如已有类似名称客户存在，系统将给出提醒，否则直接进入新建客户卡片页面。')}</Item></List>
                                {tooManyRecord ? <List renderHeader={() => getLabel('81289', '搜索结果') + ':'} className="my-list"><Item wrap multipleLine>{getLabel('15126', '搜索的结果太多无法显示! 请提供更精确的关键字搜索')}</Item></List> : null}
                                {existList && existList.length > 0 && !tooManyRecord ? <List renderHeader={() => getLabel('388628', '名称包含') + "“" + form.formParams.name + getLabel('388629', '”的客户如下') + "："} className="my-list">{this.showExistList(existList)}</List> : null}
                            </div>}
                    </div>
                    <ButtonGroup data={buttonGroupData} />
                    
                </div>
                :
                <div className={"crm-bg-loading"}>
                    <ActivityIndicator
                        text="Loading..."
                    />
                </div>
        )
    }

    buttonClick = (clickType) => {
        const store = this.props.customerAddExistStore;
        store.buttonClick(clickType);
    }

    showExistList = (existList) => {
        let array = [];
        if (existList && existList.length > 0) {
            array = existList.map((item) => {
                return <Item key={item.id} extra={item.managerName} multipleLine><div dangerouslySetInnerHTML={{ __html: item.nameLinkMobile }}></div></Item>
            });
        }
        return array;
    }
    showMap() {
        const { showMapFun } = this.props.contentStore;
        showMapFun();
    }
}